import 'package:flutter/material.dart';

// 应用入口函数
void main() {
  runApp(const MyApp());
}

// 根组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 弹性布局演示',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple, // 换个主题色以便区分
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const FlexibleLayoutDemoScreen(),
    );
  }
}

// 演示屏幕
class FlexibleLayoutDemoScreen extends StatelessWidget {
  const FlexibleLayoutDemoScreen({super.key});

  // 辅助方法，用于构建简单的带边框的文本框，方便观察布局
  Widget _buildBox(
    String label, {
    Color color = Colors.orange,
    double? width, // 改为可选，因为 Expanded 会控制
    double? height, // 改为可选，因为 Expanded 会控制
    bool isExpanded = false,
  }) {
    // 当 isExpanded 为 true 时，我们希望 Flex/Expanded 来决定尺寸，
    // 所以 Container 的 width/height 应该为 null。
    // 如果不是 Expanded，则使用传入的 width/height 或默认值。
    double? boxWidth = isExpanded ? null : (width ?? 60);
    double? boxHeight = isExpanded ? null : (height ?? 40);

    Widget childWidget = Center(
      child: Text(
        label,
        style: const TextStyle(fontSize: 12, color: Colors.white),
        textAlign: TextAlign.center,
      ),
    );

    // 如果是 Expanded，Container 自身不需要固定尺寸，
    // 但为了内容能正常显示，可能需要用 SizedBox 包裹 Text，或确保 Text 能自适应。
    // 这里我们让 Container 填充 Expanded 给的空间。
    return Container(
      width: boxWidth,
      height: boxHeight,
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: color.withAlpha((255 * 0.7).toInt()),
        border: Border.all(color: Colors.black87, width: 1), // 加深边框颜色
        borderRadius: BorderRadius.circular(4),
      ),
      child: childWidget,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('弹性布局 (Flex & Expanded) 示例')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _buildSectionTitle('Flex 与 Expanded 示例 (弹性布局)'),
            const Text('水平 Flex: 两个 Expanded 按 1:2 比例分配空间'),
            Container(
              // 加一个外边框和背景色，方便观察 Flex 范围
              padding: const EdgeInsets.all(2.0),
              color: Colors.grey[300],
              child: Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: _buildBox(
                      'Flex:1\n(水平)',
                      color: Colors.red,
                      height: 50,
                      isExpanded: true,
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: _buildBox(
                      'Flex:2\n(水平)',
                      color: Colors.green,
                      height: 50,
                      isExpanded: true,
                    ),
                  ),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('水平 Flex: 固定宽度 + Expanded'),
            Container(
              padding: const EdgeInsets.all(2.0),
              color: Colors.grey[300],
              child: Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  _buildBox('固定宽度', width: 80, height: 50, color: Colors.cyan),
                  Expanded(
                    flex: 1,
                    child: _buildBox(
                      'Flex:1\n(剩余空间)',
                      color: Colors.amber,
                      height: 50,
                      isExpanded: true,
                    ),
                  ),
                  _buildBox('固定宽度2', width: 50, height: 50, color: Colors.lime),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('垂直 Flex (固定高度120px): 三个子元素按 2:1(Spacer):1 比例'),
            Container(
              padding: const EdgeInsets.all(2.0),
              color: Colors.grey[300],
              child: SizedBox(
                // 给 Flex 一个固定的高度，以便观察垂直方向的比例分配
                height: 120.0,
                child: Flex(
                  direction: Axis.vertical,
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: _buildBox(
                        'Flex:2\n(垂直)',
                        color: Colors.red,
                        isExpanded: true,
                      ),
                    ),
                    const Spacer(
                      // Spacer 占据一份比例的空白空间
                      flex: 1,
                    ), // Spacer 内部是 SizedBox.shrink()，所以没有可见内容
                    Expanded(
                      flex: 1,
                      child: _buildBox(
                        'Flex:1\n(垂直)',
                        color: Colors.green,
                        isExpanded: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            _buildSpacer(),

            const Text('Row (本质是Flex) 中的 Expanded 和 Spacer:'),
            Container(
              padding: const EdgeInsets.all(2.0),
              color: Colors.grey[300],
              child: Row(
                // Row 也是 Flex 的子类
                children: <Widget>[
                  _buildBox('Start', color: Colors.purple),
                  const Spacer(flex: 1), // 占据1份空白
                  _buildBox('Middle', color: Colors.deepOrange),
                  const Spacer(flex: 2), // 占据2份空白
                  _buildBox('End', color: Colors.teal),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Column (本质是Flex) 中的 Expanded 和 Spacer:'),
            Container(
              height: 200, // 给 Column 一个固定高度
              padding: const EdgeInsets.all(2.0),
              color: Colors.grey[300],
              child: Column(
                children: <Widget>[
                  _buildBox(
                    'Top',
                    color: Colors.blueGrey,
                    width: double.infinity,
                  ), // 占满宽度
                  const Spacer(flex: 1),
                  Expanded(
                    flex: 2, // 占据两份剩余空间
                    child: _buildBox(
                      'Middle (Expanded Flex:2)',
                      color: Colors.brown,
                      isExpanded: true,
                      width: double.infinity,
                    ),
                  ),
                  const Spacer(flex: 1),
                  _buildBox(
                    'Bottom',
                    color: Colors.blueGrey,
                    width: double.infinity,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 辅助方法，用于构建章节标题
  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 8.0),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
      ),
    );
  }

  // 辅助方法，用于构建垂直间距
  Widget _buildSpacer({double height = 20.0}) {
    return SizedBox(height: height);
  }
}
